<template>
  <h2>pinia - store3（storeToRefs）</h2>
  <div>
    <div>Current Count: {{ count }}</div>
    <div>Current doubleCount: {{ doubleCount }}</div>
    <button type="button" @click="counterStore.increment">counterStore.count++</button>
    <div>ref: {{ cr }}</div>
    <button type="button" @click="cr++">ref:cr++</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia';
import { ref } from 'vue'

// 定义 counterStore 变量接收存储
const counterStore = useCounterStore()

// 解构的话会失去响应性，需要 storeToRefs 转为响应式变量(不建议解构)
const { count, doubleCount } = storeToRefs(useCounterStore())
const cr = ref(0)
</script>

<style scoped></style>
